<template>
  <div id="pos" class="pos">
    <el-row>
      <el-col :span="7" class="pos-order" id="orderlist">
        <el-tabs>
          <el-tab-pane label="点餐">
            <el-table :data="tableData" border show-summary style="width: 100%">
              <el-table-column prop="goodsName" label="商品"></el-table-column>
              <el-table-column prop="count" label="量" width="50"></el-table-column>
              <el-table-column prop="price" label="金额" width="70"></el-table-column>
              <el-table-column label="操作" width="100" fixed="right">
                <template slot-scope="scope">
                      <el-button type="text" size="small" @click="delOrderGood(scope.row)">删除</el-button>
                      <el-button type="text" size="small" @click="addCount(scope.row)">增加</el-button>
</template>
                </el-table-column>
            </el-table>
            <div class="divbtn">
                <el-button type="warning" size="small" >挂单</el-button>
                <el-button type="danger" size="small" @click="emptyOrder()">删除</el-button>
                <el-button type="success" size="small" @click="checkOut()">结账</el-button>
            </div>

          </el-tab-pane>
          <el-tab-pane label="挂单">
            <el-table :data="tableData" border show-summary style="width: 100%">
              <el-table-column prop="goodsName" label="商品"></el-table-column>
              <el-table-column prop="count" label="量" width="50"></el-table-column>
              <el-table-column prop="price" label="金额" width="70"></el-table-column>
              <el-table-column label="操作" width="100" fixed="right">
<template slot-scope="scope">
  <el-button type="text" size="small">
    删除</el-button>
  <el-button type="text" size="small">增加</el-button>
</template>
                </el-table-column>
            </el-table>
            <div class="divbtn">
                <el-button type="danger" size="small" @click="emptyOrder()">删除</el-button>
                <el-button type="success" size="small" >结账</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="外卖">
            外卖
          </el-tab-pane>
        </el-tabs>

      </el-col>
      <el-col :span="17">
        <div class="often-goods">
          <div class="title">常用</div>
          <div class="often-goods-list">
            <ul>
              <li v-for="(g,index) in oftenGoods" @click="addGoods(g)">
                <span>({{index}}){{g.goodsName}}</span>
                <span class="o-price">¥{{g.price}}</span>
              </li>
            </ul>
          </div>

        <div class="goods-type">
          <el-tabs>
            <el-tab-pane label="汉堡🍔">
              <div>
                <ul class='cookList'>
    <li v-for="good in type0Goods" @click="addGoods(good)">
        <span class="foodImg"><img :src="good.goodsImg" width="100%"></span>
        <span class="foodName">{{good.goodsName}}</span>
        <span class="foodPrice">￥{{good.price}}元</span>
    </li>
</ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="小食">
              小食
            </el-tab-pane>
            <el-tab-pane label="饮料">
              饮料
            </el-tab-pane>
            <el-tab-pane label="套餐">
              套餐
            </el-tab-pane>
          </el-tabs>

        </div>
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import axios from 'axios';

  export default {
    name: "Pos",
    data() {
      return {
        //订单商品
        tableData: [{
            goodsId: 122,
            goodsName: '汉堡',
            count: 2,
            price: 28.5
          },
          {
            goodsId: 322,
            goodsName: '可乐',
            count: 2,
            price: 7
          }
        ],
        oftenGoods: [{
          goodsId: 1,
          goodsName: '香辣鸡腿堡',
          price: 18
        }, {
          goodsId: 2,
          goodsName: '田园鸡腿堡',
          price: 15
        }, {
          goodsId: 3,
          goodsName: '和风汉堡',
          price: 15
        }, {
          goodsId: 4,
          goodsName: '快乐全家桶',
          price: 80
        }, {
          goodsId: 5,
          goodsName: '脆皮炸鸡腿',
          price: 10
        }, {
          goodsId: 6,
          goodsName: '魔法鸡块',
          price: 20
        }, {
          goodsId: 7,
          goodsName: '可乐大杯',
          price: 10
        }, {
          goodsId: 8,
          goodsName: '雪顶咖啡',
          price: 18
        }, {
          goodsId: 9,
          goodsName: '大块鸡米花',
          price: 15
        }, {
          goodsId: 20,
          goodsName: '香脆鸡柳',
          price: 17
        }],
        type0Goods: [{
          goodsId: 1,
          goodsImg: "https://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/bainuo/crop%3D0%2C7%2C808%2C489%3Bw%3D720%3Bq%3D99/sign=2a52faebba315c6057da31afb081e724/09fa513d269759eef7c13635b4fb43166c22dfbf.jpg",
          goodsName: '香辣鸡腿堡',
          price: 18
        }, {
          goodsId: 2,
          goodsImg: "https://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/bainuo/crop%3D0%2C0%2C675%2C410%3Bw%3D470%3Bq%3D89/sign=fd185064282eb938f82220b2e852a905/8601a18b87d6277f37d061bd2f381f30e824fc71.jpg",
          goodsName: '田园鸡腿堡',
          price: 15
        }, {
          goodsId: 3,
          goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos004.jpg",
          goodsName: '和风汉堡',
          price: 15
        }, {
          goodsId: 4,
          goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg",
          goodsName: '快乐全家桶',
          price: 80
        }, {
          goodsId: 5,
          goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg",
          goodsName: '脆皮炸鸡腿',
          price: 10
        }, {
          goodsId: 6,
          goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos004.jpg",
          goodsName: '魔法鸡块',
          price: 20
        }, {
          goodsId: 7,
          goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos001.jpg",
          goodsName: '可乐大杯',
          price: 10
        }, {
          goodsId: 8,
          goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg",
          goodsName: '雪顶咖啡',
          price: 18
        }, {
          goodsId: 9,
          goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos002.jpg",
          goodsName: '大块鸡米花',
          price: 15
        }, {
          goodsId: 20,
          goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos002.jpg",
          goodsName: '香脆鸡柳',
          price: 17
        }]
      }
    },
    created(){
      axios.get('https://www.easy-mock.com/mock/5b8b30dbf032f03c5e71de7f/kuaican/oftenGoods')
      .then(response=>{
        console.log(response);
        this.oftenGoods=null;
        this.oftenGoods=response.data;
      }).catch(error=>{
        console.log(error);
        //alert('出错了111');
      });
      // axios.get('http://jspang.com/DemoApi/typeGoods.php')
      // .then(response=>{
      //    console.log(response);
      //    //this.oftenGoods=response.data;
      //    this.type0Goods=response.data[0];
      //    this.type1Goods=response.data[1];
      //    this.type2Goods=response.data[2];
      //    this.type3Goods=response.data[3];
      // })
      // .catch(error=>{
      //     console.log(error);
      //     alert('网络错误，不能访问');
      // })
    },
    mounted: function() {
      var height = document.body.clientWidth;
      console.log(height);

      document.getElementById("orderlist").style.height = height + "px";
    },
    methods:{
      //点餐
      addGoods(goods){
        // let v =this.tableData.filter(x=>x.goodsId==good.goodsId);
        // if(v.length>0){
        //   //v[0].count++;
        //   let arr = this.tableData.filter(o =>o.goodsId == good.goodsId);
        //    arr[0].count++;
        // }else{
        //   good.count=1;
        //   this.tableData.push(good);
        // }
         this.totalCount=0; //汇总数量清0
            this.totalMoney=0;
            let isHave=false;
            //判断是否这个商品已经存在于订单列表
            for (let i=0; i<this.tableData.length;i++){
                console.log(this.tableData[i].goodsId);
                if(this.tableData[i].goodsId==goods.goodsId){
                    isHave=true; //存在
                }
            }
            //根据isHave的值判断订单列表中是否已经有此商品
            if(isHave){
                //存在就进行数量添加
                 let arr = this.tableData.filter(o =>o.goodsId == goods.goodsId);
                 arr[0].count++;
                 //console.log(arr);
            }else{
                //不存在就推入数组
                let newGoods={goodsId:goods.goodsId,goodsName:goods.goodsName,price:goods.price,count:1};
                 this.tableData.push(newGoods);
            }
            //进行数量和价格的汇总计算
            this.tableData.forEach((element) => {
                this.totalCount+=element.count;
                this.totalMoney=this.totalMoney+(element.price*element.count);
            });

      },
      //删除
      delOrderGood(good){
        this.tableData=this.tableData.filter(x=>x.goodsId!=good.goodsId);
      },
      //增加数量
      addCount(v){
        v.count++;
      },
      emptyOrder(){
        this.tableData=[];
      },
      //结账
      checkOut(){
        if(this.tableData.length<1){
          this.$message.error('没有商品，不能结账');
        }else{
          this.tableData=[];
          this.$message({
            message:'结账成功',
            type:'success'
          });
        }
      }
    }
  };
</script>

<style scoped>
  .pos-order {
    background-color: #f9fcfa;
    border-right: 1px solid #3a1515;
  }

  .divbtn {
    margin: 20px;
    text-align: center;
  }

  .often-goods {}

  .title {
    height: 20px;
    border-bottom: 1px solid #03dce6;
    background-color: #03dce6;
    padding: 10px;
    text-align: left;
  }

  .often-goods-list ul li {
    list-style: none;
    float: left;
    border: 1px solid blue;
    padding: 10px;
    margin: 10px;
    background-color: #f9fcfa;
  }

  .o-price {
    color: #58B7FF;
  }

  .goods-type {
    clear: both;
  }

  .cookList li {
    list-style: none;
    width: 23%;
    border: 1px solid #E5E9F2;
    height: auot;
    overflow: hidden;
    background-color: #fff;
    padding: 2px;
    float: left;
    margin: 2px;
  }

  .cookList li span {
    display: block;
    float: left;
  }

  .foodImg {
    width: 40%;
  }

  .foodName {
    font-size: 18px;
    padding-left: 10px;
    color: brown;
  }

  .foodPrice {
    font-size: 16px;
    padding-left: 10px;
    padding-top: 10px;
  }
</style>
